<!DOCTYPE html>
<html lang="en">
	<head>
		<title>iWumbo</title>
		<link rel="icon" type="image/png" href="<?php echo base_url('assets/icon/favicon.ico'); ?>" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css'); ?>"/>
		<script type="text/javascript" src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/highcharts.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/highcharts-more.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/modules/exporting.js'); ?>"></script>
		<script type="text/javascript">
			var subs = 'Keberangkatan';
			var chart;
			var options;
			function ubah(z){
				subs = z;
				$.getJSON('data/kedatangan_total.json', function(data) {
					options.series = data;
					chart.redraw();
				});

			}
			
			$(function () {
				options = {
					chart: {
						renderTo: container,
						type: 'bubble',
						zoomType: 'xy'
					},
					title: {
						text: '10 Bandara Tersibuk di Indonesia'
					},					
					subtitle: {
						text: subs
					},					
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle',
						borderColor: '#CCCCCC',
						borderWidth: 1,
						borderRadius: 5
					},					
					xAxis: {
						title: {
							text: 'Domestik'
						},
						max: 100000000
					},					
					yAxis: {
						title: {
							text: 'Internasional'
						},
						max: 40000000
					},
					tooltip: {
						formatter: function() {
							return 'Penumpang Domestik: <b>' + Highcharts.numberFormat(this.x, 0, '.', '.') + '</b><br/>Penumpang Internasional: <b>' + Highcharts.numberFormat(this.y, 0, '.', '.') + '</b><br/>Jumlah Pesawat: <b>' + Highcharts.numberFormat(this.point.z, 0, '.', '.') + '</b>';
						}
					},
					series: [{}]
				};
				
				$.getJSON('data/kedatangan_total.json', function(data) {
					options.series = data;
					chart = new Highcharts.Chart(options);
				});
				
				var min_value = 0;
				var max_value = 60;

				$('#slider').slider({
					min: min_value,
					max: max_value,
					step: 1,

					slide: function(event, ui) {
						$('#slider_value').html('$' + ui.value);
						var newdata = [];
						for (var i=0 ; i<6 ; i++) {
							newdata.push(ui.value * i);
						}
						chart.series[0].setData (newdata);
					},
					stop: function(event, ui) {
						
					}
				});
				
				
			});
			
		</script>
	</head>
	<body>
		<div>
			<label>Silakan memilih data yang hendak divisualisasikan</label>
			<select style="width: 280px" id="option" name="option">
				<option value=0>Keberangkatan</option>
				<option value=1>Kedatangan</option>
			</select>
		</div>
		
		<br/><br/>
		
		<label><i>Drag the mouse anywhere in the viz to zoom</i></label>
		<div id="container"></div>
		<div id="slidertitle">Bulan - Tahun</div>
		<div id="slider" width="400px"></div>
		<div id="slider_value">$0</div>
	</body>
</html>